import React, { Component } from "react";

export default class FormCom extends Component {

  //声明方法作为事件的回调
  login = (e) => {
    //获取邮箱
    let email = this.email.value;
    //获取密码
    let pass = this.pass.value;
    //输出
    console.log(`邮箱为: ${email} 密码为: ${pass}`);
    //阻止默认行为
    e.preventDefault();
  }

  reset = (e) => {
    e.preventDefault();
    this.email.value = '';
    this.pass.value = '';
  }

  render() {
    return (
      <div>
        <h2>登录</h2>
        <hr />
        <form>
          邮箱: <input ref={el => this.email = el} type="text" name="email" /><br/>
          密码: <input ref={el => this.pass = el} type="text" name="pass" /><br/>
          <hr />
          <button onClick={this.login}>登录</button>
          <button onClick={this.reset}>重置</button>
        </form>
      </div>
    );
  }
}
